import { Component, OnInit, Input,Output,EventEmitter ,OnChanges,SimpleChanges} from '@angular/core';

@Component({
  selector: 'app-stars',
  templateUrl: './stars.component.html',
  styleUrls: ['./stars.component.css']
})
export class StarsComponent implements OnInit,OnChanges {
  @Input()
  private rating:number = 0;

  @Output()
  private ratingChange:EventEmitter<number> =  new EventEmitter();
  //这里是一个小技巧。当我们的输入属性，和我们输出属性是同名多一个change时。可以在父组件的模板 中使用双向绑定的写法。

  private stars: boolean[];

  @Input()
  private readonly:boolean = true;

  

  constructor() { }

  ngOnInit() {
    this.stars = [];
    for (let i =1; i<=5; i++) {
      this.stars.push(i>this.rating);
    }
    // this.stars = [false, true, true, true, true];

  }

  ngOnChanges(changes:SimpleChanges) {
     this.stars = [];
    for (let i =1; i<=5; i++) {
      this.stars.push(i>this.rating);
    } 
  }

  clickStar(index: number) {
    if(!this.readonly) {
      this.rating= index +1;
      // this.ngOnInit();这句注释掉是因为，reating是一个输入属性，我们changes可以监听它，改变时就会调用我们上面的钩子函数。
      this.ratingChange.emit(this.rating);
    }
  }

}
